<template>
    <div class="pagination-panel">
        <el-pagination
            class="pagination"
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
            :current-page="currentPage"
            :page-sizes="pageSizeList"
            :page-size="currentPageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="dataTotal"
        ></el-pagination>
    </div>
</template>

<script>
export default {
    props: {
        dataTotal: {
            type: Number,
            default: 0
        },
        pageSizeList: {
            // type: Array,
            // default: []
        }
    },
    data() {
        return {
            currentPage: 1,
            currentPageSize: 20
        };
    },

    // @Emit('changePage')
    // handleEmitChangePage() {
    //   return {
    //     pageNum: this.currentPage,
    //     pageSize: this.currentPageSize
    //   };
    // }

    // @Emit('refreshData')
    // handleEmitRefreshData() {
    //   return {
    //     pageNum: this.currentPage,
    //     pageSize: this.currentPageSize
    //   };
    // }

    methods: {
        // 切换table显示的条数
        handleSizeChange(val) {
            this.currentPageSize = val;
            this.currentPage = 1;
            // this.handleEmitChangePage();
            this.handleEmit();
        },

        // 切换table显示页
        handlePageChange(val) {
            this.currentPage = val;
            // this.handleEmitChangePage();
            this.handleEmit();
        },

        // 刷新数据
        handleRefresh() {
            // this.handleEmitRefreshData();
            this.handleEmit();
        },
        handleEmit() {
            let obj = {
                pageNum: this.currentPage,
                pageSize: this.currentPageSize
            };
            this.$emit('handleEmitChangePage', obj);
        },

        // 重置页码
        resetPage() {
            this.currentPage = 1;
        }
    }
};
</script>

<style lang="less">
.pagination-panel {
    background: #fff;
    overflow: hidden;
    padding: 16px 0 5px 0;
    border-radius: 0 0 8px 8px;
    border-top: 0;
    .btn_refresh {
        float: right;
    }
    .pagination {
        text-align: right;
        float: right;
        margin-right: 20px;
        color: #555;
        font-size: 14px;
    }
}
</style>
